<template>
  <div class="task-container">
    <div class="dashboard-text">
      <div class="lef">
        <i />
        任务奖励设置
      </div>
    </div>
    <div class="taskbd">
      <div class="dhead">
        <h5 class="ltit">新手任务</h5>
        <p class="rtit">新手任务每个用户只奖励一次，相关值必须为大于0的整数</p>
      </div>
      
      <div class="data-list clearfix">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm" label-width="8vw">
          <table class="newbie_task">
            <tr>
              <td>新手欢迎奖励</td>
              <td>
                <el-form-item label="金币" prop="w.goldReward" >
                  <span style="width:130px;">
                    <el-input v-model="ruleForm.w.goldReward" style="width: 8vw;" />
                    枚
                  </span>
                </el-form-item>
                <!-- <span>枚</span> -->
              </td>
              <td>
                <el-form-item label="聚合金币值" prop="w.polymerizationReward">
                  <span style="width:130px;">
                    <el-input v-model="ruleForm.w.polymerizationReward" style="width: 8vw;"/>
                    枚
                  </span>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td>完善个人信息</td>
              <td>
                <el-form-item label="金币" prop="i.goldReward" >
                  <span style="width:130px;">
                    <el-input v-model="ruleForm.i.goldReward" style="width: 8vw;" />
                    枚
                  </span>
                </el-form-item>
                <!-- <span>枚</span> -->
              </td>
              <td>
                <el-form-item label="聚合金币值" prop="i.polymerizationReward">
                  <span style="width:130px;">
                    <el-input v-model="ruleForm.i.polymerizationReward" style="width: 8vw;"/>
                    枚
                  </span>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td>成功关注1位达人</td>
              <td>
                <el-form-item label="金币" prop="a.goldReward" >
                  <span style="width:130px;">
                    <el-input v-model="ruleForm.a.goldReward" style="width: 8vw;" />
                    枚
                  </span>
                </el-form-item>
                <!-- <span>枚</span> -->
              </td>
              <td>
                <el-form-item label="聚合金币值" prop="a.polymerizationReward">
                  <span style="width:130px;">
                    <el-input v-model="ruleForm.a.polymerizationReward" style="width: 8vw;"/>
                    枚
                  </span>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td>首次成功分享好友</td>
              <td>
                <el-form-item label="金币" prop="s.goldReward" >
                  <span style="width:130px;">
                    <el-input v-model="ruleForm.s.goldReward" style="width: 8vw;" />
                    枚
                  </span>
                </el-form-item>
                <!-- <span>枚</span> -->
              </td>
              <td>
                <el-form-item label="聚合金币值" prop="s.polymerizationReward">
                  <span style="width:130px;">
                    <el-input v-model="ruleForm.s.polymerizationReward" style="width: 8vw;"/>
                    枚
                  </span>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td>首次成功购买金币</td>
              <td>
                <el-form-item label="金币" prop="b.goldReward" >
                  <span style="width:130px;">
                    <el-input v-model="ruleForm.b.goldReward" style="width: 8vw;" />
                    枚
                  </span>
                </el-form-item>
                <!-- <span>枚</span> -->
              </td>
              <td>
                <el-form-item label="聚合金币值" prop="b.polymerizationReward">
                  <span style="width:130px;">
                    <el-input v-model="ruleForm.b.polymerizationReward" style="width: 8vw;"/>
                    枚
                  </span>
                </el-form-item>
              </td>
            </tr>
          </table>
          <div class="dhead">
            <h5 class="ltit">日常任务</h5>
            <p class="rtit">日常任务可以奖励多次，相关值必须为大于0的整数</p>
          </div>
          <table class="newbie_task">
            <tr>
              <td>每日登录</td>
              <td>
                <el-form-item label="金币" prop="l.goldReward" >
                  <span style="width:130px;">
                    <el-input v-model="ruleForm.l.goldReward" style="width: 8vw;" />
                    枚
                  </span>
                </el-form-item>
                <!-- <span>枚</span> -->
              </td>
              <td>
                <el-form-item label="聚合金币值" prop="l.polymerizationReward">
                  <span style="width:130px;">
                    <el-input v-model="ruleForm.l.polymerizationReward" style="width: 8vw;"/>
                    枚
                  </span>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td>每日签到</td>
              <td>
                <el-form-item label="金币" prop="r.goldReward" >
                  <span style="width:130px;">
                    <el-input v-model="ruleForm.r.goldReward" style="width: 8vw;" />
                    枚
                  </span>
                </el-form-item>
                <!-- <span>枚</span> -->
              </td>
              <td>
                <el-form-item label="聚合金币值" prop="r.polymerizationReward">
                  <span style="width:130px;">
                    <el-input v-model="ruleForm.r.polymerizationReward" style="width: 8vw;"/>
                    枚
                  </span>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td>成功邀请好友</td>
              <td>
                <el-form-item label="金币" prop="v.goldReward" >
                  <span style="width:130px;">
                    <el-input v-model="ruleForm.v.goldReward" style="width: 8vw;" />
                    枚
                  </span>
                </el-form-item>
                <!-- <span>枚</span> -->
              </td>
              <td>
                <el-form-item label="聚合金币值" prop="v.polymerizationReward">
                  <span style="width:130px;">
                    <el-input v-model="ruleForm.v.polymerizationReward" style="width: 8vw;"/>
                    枚
                  </span>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td>好友首次成功购买金币</td>
              <td>
                <el-form-item label="金币" prop="f.goldReward" >
                  <span style="width:130px;">
                    <el-input v-model="ruleForm.f.goldReward" style="width: 8vw;" />
                    枚
                  </span>
                </el-form-item>
                <!-- <span>枚</span> -->
              </td>
              <td>
                <el-form-item label="聚合金币值" prop="f.polymerizationReward">
                  <span style="width:130px;">
                    <el-input v-model="ruleForm.f.polymerizationReward" style="width: 8vw;"/>
                    枚
                  </span>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td>购买金币天数达标</td>
              <td>
                <el-form-item label="金币" prop="t.goldReward" >
                  <span style="width:130px;">
                    <el-input v-model="ruleForm.t.goldReward" style="width: 8vw;" />
                    枚
                  </span>
                </el-form-item>
                <!-- <span>枚</span> -->
              </td>
              <td>
                <el-form-item label="聚合金币值" prop="t.polymerizationReward">
                  <span style="width:130px;">
                    <el-input v-model="ruleForm.t.polymerizationReward" style="width: 8vw;"/>
                    枚
                  </span>
                </el-form-item>
              </td>
            </tr>
          </table>
          
        </el-form>
      </div>
    </div>
    <div class="submit">
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    </div>
  </div>
</template>
<script>
import { coinReward, updateReward } from "@/api/usermanage.js";
export default {
  inject: ["reload"],
  data() {
    var checkNum = (rule, value, callback) => {
      var bool = new RegExp("^[1-9][0-9]*$").test(value);
      if (!bool || value == "") {
        return callback(new Error("请输入大于0的整数"));
        // value = ''
      } else {
        callback();
      }
    };
    return {
      list: [],
      pageSize:16,
      ruleForm: {
        //管理員
        w: {
          id: "",
          goldReward: "",
          polymerizationReward: ""
        },
        //個人信息
        i: {
          id: "",
          goldReward: "",
          polymerizationReward: ""
        },
        //關注達人
        a: {
          id: "",
          goldReward: "",
          polymerizationReward: ""
        },
        //分享
        s: {
          id: "",
          goldReward: "",
          polymerizationReward: ""
        },
        //購買金幣
        b: {
          id: "",
          goldReward: "",
          polymerizationReward: ""
        },
        //登錄
        l: {
          id: "",
          goldReward: "",
          polymerizationReward: ""
        },
        //簽到
        r: {
          id: "",
          goldReward: "",
          polymerizationReward: ""
        },
        //邀請
        v: {
          id: "",
          goldReward: "",
          polymerizationReward: ""
        },
        //好友購買
        f: {
          id: "",
          goldReward: "",
          polymerizationReward: ""
        },
        //金币达标
        t: {
          id: "",
          goldReward: "",
          polymerizationReward: ""
        }
        // coin: '',
        // jcoin: '',
        // coin1: '',
        // jcoin1: '',
        // coin2: '',
        // jcoin2: '',
        // coin3: '',
        // jcoin3: '',
        // coin4: '',
        // jcoin4: '',
        // coin5: '',
        // jcoin5: '',
        // coin6: '',
        // jcoin6: '',
        // jcoin7: '',
        // coin7: '',
        // coin8: '',
        // jcoin8: '',
        // coin9: '',
        // jcoin9: ''
      },
      rules: {
        "w.polymerizationReward": [{ validator: checkNum, trigger: "blur" }],
        "w.goldReward": [{ validator: checkNum, trigger: "blur" }],
        "i.polymerizationReward": [{ validator: checkNum, trigger: "blur" }],
        "i.goldReward": [{ validator: checkNum, trigger: "blur" }],
        "a.polymerizationReward": [{ validator: checkNum, trigger: "blur" }],
        "a.goldReward": [{ validator: checkNum, trigger: "blur" }],
        "s.polymerizationReward": [{ validator: checkNum, trigger: "blur" }],
        "s.goldReward": [{ validator: checkNum, trigger: "blur" }],
        "b.polymerizationReward": [{ validator: checkNum, trigger: "blur" }],
        "b.goldReward": [{ validator: checkNum, trigger: "blur" }],
        //日常
        "l.polymerizationReard": [{ validator: checkNum, trigger: "blur" }],
        "l.goldReward": [{ validator: checkNum, trigger: "blur" }],
        "r.polymerizationReward":[{validator: checkNum, trigger: 'blur'}],
        "r.goldReward":[{validator: checkNum, trigger: 'blur'}],
        "v.polymerizationReward": [{ validator: checkNum, trigger: "blur" }],
        "v.goldReward": [{ validator: checkNum, trigger: "blur" }],
        "f.polymerizationReward": [{ validator: checkNum, trigger: "blur" }],
        "f.goldReward": [{ validator: checkNum, trigger: "blur" }],
        "t.polymerizationReward": [{ validator: checkNum, trigger: "blur" }],
        "t.goldReward": [{ validator: checkNum, trigger: "blur" }]
      }
    };
  },
  created() {
    this.getrewardList();
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          for (let i in this.ruleForm) {
            for (let j = 0; j < this.list.length; j++) {
              if (i == this.list[j].rewardType) {
                if (this.ruleForm[i].goldReward) {
                  this.list[j].goldReward = this.ruleForm[i].goldReward;
                  // this.list[j].id=this.ruleForm
                }
                if (this.ruleForm[i].polymerizationReward) {
                  this.list[j].polymerizationReward = this.ruleForm[
                    i
                  ].polymerizationReward;
                }
              }
              // console.log(this.list[i].id);
            }
          }
          updateReward(this.list).then(res => {
            this.getrewardList();
            // alert(this.list.message);
          });
          this.$alert("提交成功");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getrewardList() {
      coinReward({
        pageNum: 1,
        pageSize:this.pageSize
      }).then(res => {
        this.pageSize=res.data.total;
        if (res.data.list && res.data.list.length) {
          let data = res.data.list;
          this.list = data;
          for (let index = 0; index < data.length; index++) {
            const element = data[index];
            if (this.ruleForm[element.rewardType]) {
              this.ruleForm[element.rewardType].goldReward = element.goldReward;
              this.ruleForm[element.rewardType].polymerizationReward =
                element.polymerizationReward;
            }
          }
        }
      });
    }
    // proving1(e) {
    //   var keynum = window.event ? e.keyCode : e.which
    //   var keychar = String.fromCharCode(keynum)
    //   if (keynum == 189 || keynum == 190 || keynum == 109) {
    //     //  this.$message.warning("禁止输入小数和负数")
    //     alert('禁止输入小数和负数')
    //     e.target.value = ''
    //   }
    // }
  }
};
</script>
<style lang="scss" scope>
  @import './index.css'
</style>
<style lang="scss" scoped>
.task-container {
  width: 100%;
  padding: 0 110px 120px 26px;
  margin: 16px 0;
  .dashboard-text {
    margin-top: 17px;
    height: 37px;
    .lef {
      line-height: 37px;
      font-size: 16px;
      font-weight: 900;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      i {
        display: inline-block;
        width: 11px;
        height: 20px;
        background: #488dff;
        border-radius: 4px;
        margin-right: 12px;
      }
    }
  }
  .taskbd {
    // min-height: 1094px;
    // height:auto;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.1);
    border-radius: 4px;
    padding: 24px 23px 36px 30px;
    .dhead {
      // margin-bottom: 20px;
      display: flex;
      align-items: center;
      .ltit {
        font-size: 14px;
        font-family: "PingFang SC";
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        margin-right: 10px;
      }
      .rtit {
        display: inline-block;
        font-size: 14px;
        font-family: " PingFang SC";
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
      }
    }
    .data-list {
      .listone {
        position: relative;
        // height: 460px;
        // border: 1px solid rgba(230, 230, 230, 1);
        border-radius: 4px;
        // margin-bottom: 30px;
        .left {
          list-style: none;
          li {
            width: 308px;
            height: 88px;
            line-height: 88px;
            padding-left: 21px;
            border-bottom: 0px;
            border: 1px solid rgba(230, 230, 230, 1);
            background: rgba(242, 242, 242, 1);
            border-radius: 2px 0px 0px 2px;
            color: #666;
          }
        }
        .right {
          list-style: none;
          position: absolute;
          left: 308px;
          right: 0;
          li {
            // width: 1137px;
            height: 88px;
            border: 1px solid rgba(230, 230, 230, 1);
            border-bottom: 0px;
            border-left: 0px;
          }
          .rli {
            .rlip1 {
              margin-left: 10%;
            }
            .rlip {
              width: 30%;
              display: flex;
              align-items: center;
              .el-form-item {
                display: flex;
              }
              span {
                display: inline-block;
                margin-left: 5px;
                height: 36px;
              }
            }
          }
          .last {
            border-bottom: 1px solid rgba(230, 230, 230, 1);
          }
        }
        .last {
          border-bottom: 1px solid rgba(230, 230, 230, 1);
        }
      }
    }
  }
  .submit {
    width: 100px;
    height: 40px;
    margin: 30px auto;
  }
}
</style>
